<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8"/>
		<title>SIMPLER</title>
		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="css/style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
		
		
		<!-- JS -->
		<script src="js/jquery-1.6.4.min.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
		<script src="js/custom.js"></script>
		<script src="js/tabs.js"></script>
		<script src="js/tabs.js"></script>
		
		
		<!-- Tweet -->
		<link rel="stylesheet" href="css/jquery.tweet.css" media="all"  /> 
		<script src="js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="css/superfish.css" /> 
		<script  src="js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
		
		<!-- Flex Slider -->
		<link rel="stylesheet" href="css/flexslider.css" >
		<script src="js/jquery.flexslider-min.js"></script>
		<!-- ENDS Flex Slider -->
		
		<!-- Masonry -->
		<script src="js/masonry.min.js" ></script>
		<script src="js/imagesloaded.js" ></script>
		<!-- ENDS Masonry -->
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="css/lessframework.css"/>
		
		<!-- modernizr -->
		<script src="js/modernizr.js"></script>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="css/skin.css"/>
		
		
		

	</head>
	
	<body lang="en">
	
		<header>
			<div class="wrapper clearfix">
				
				<div id="logo">
					<a href="index.html"><img  src="img/logo.png" alt="Simpler"></a>
				</div>
				
				<!-- nav -->
				<ul id="nav" class="sf-menu">
					<li><a href="index.html">HOME</a></li>
					<li><a href="blog.html">BLOG</a></li>
					<li><a href="page.html">ABOUT</a>
						<ul>
							<li><a href="page-elements.html">Elements</a></li>
							<li><a href="page-icons.html">Icons</a></li>
							<li><a href="page-typography.html">Typography</a></li>
						</ul>
					</li>
					<li class="current-menu-item"><a href="portfolio.html">WORK</a></li>
					<li><a href="contact.html">CONTACT</a></li>
					<li><a href="http://luiszuno.com/blog/downloads/simpler-template">DOWNLOAD NOW</a></li>
				</ul>
				<!-- ends nav -->
				
				<!-- comboNav -->
				<select id="comboNav">
					<option value="index.html" >HOME</option>
					<option value="blog.html">BLOG</option>
					<option value="page.html">ABOUT</option>
					<option value="page-elements.html">- Elements -</option>
					<option value="page-icons.html">- Icons -</option>
					<option value="page-typography.html">- Typography -</option>
					<option value="portfolio.html" selected="selected">WORK</option>
					<option value="http://luiszuno.com/blog/downloads/simpler-template">DOWNLOAD NOW</option>
				</select>
				<!-- comboNav -->
				
			</div>
		</header>
		
		
		
		<!-- MAIN -->
		<div id="main">	
			<div class="wrapper clearfix">
				
				<!-- masthead -->
				<div class="masthead clearfix">
					<h1>ABOUT</h1>
					<ul class="cat-nav">
						<li class="current"><a href="#">All</a></li>
						<li><a href="#">Audio</a></li>
						<li><a href="#">Print</a></li>
						<li><a href="#">Web Design</a></li>
						<li><a href="#">Motion Graphics</a></li>
						<li><a href="#">Logo</a></li>
						<li><a href="#">Photo</a></li>
					</ul>
				</div>
				<div class='mh-div'></div>
				<!-- ENDS masthead -->
				
				
				
				<!-- portfolio list -->
	        	<div class="featured portfolio-list clearfix">
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/gallery-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>

					<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/gallery-3.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-2.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>

					<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/gallery-2.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-3.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/gallery-2.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>

					<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>

	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-2.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>

					<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/gallery-2.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-3.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
	        		
	        		<figure>
        				<a href="project.html" class="thumb">
        					<img src="img/dummies/featured-1.jpg" alt="Alt text" />
        				</a>
	        			<figcaption>Pellentesque habitant morbi</figcaption>
	        		</figure>
					        		
	        	</div>
	        	<!-- ENDS featured -->
	        	
	        	
	        	<!-- pager -->
        		<ul class="pager">
					<li class="paged">Page 1 of 2</li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
				</ul>
				<div class="clearfix"></div>
	        	<!-- ENDS pager -->

        	
        	

			<!-- Fold image -->
			<div id="fold"></div>
			</div>
			
		</div>
		<!-- ENDS MAIN -->
		
		
		<footer>	
			
			<div class="wrapper clearfix">
				
				<!-- widgets -->
				<ul  class="widget-cols clearfix">
					<li class="first-col">
						
						<div class="widget-block">
							<h4>RECENT POSTS</h4>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post clearfix">
								<a href="#" class="thumb"><img src="img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
						</div>
					</li>
					
					<li class="second-col">
						
						<div class="widget-block">
							<h4>FREE TEMPLATES &amp; THEMES</h4>
							<p>Visit <a href="http://templatecreme.com/" >Template Creme</a> and browse the selection of well-made FREE Templates and WordPress Themes.</p>
						</div>
						
					</li>
					
					<li class="third-col">
						
						<div class="widget-block">
							<div id="tweets" class="footer-col tweet">
		         				<h4>TWITTER WIDGET</h4>
		         			</div>
		         		</div>
		         		
					</li>
					
					<li class="fourth-col">
						
						<div class="widget-block">
							<h4>FREE TEMPLATES &amp; THEMES</h4>
							<p>Visit <a href="http://templatecreme.com/" >Template Creme</a> and browse the selection of well-made FREE Templates and WordPress Themes.</p>
						</div>
		         		
					</li>	
				</ul>
				<!-- ENDS widgets -->	
				
				
				<!-- bottom -->
				<div class="footer-bottom">
					<div class="left">Simpler Template by <a href="http://www.luiszuno.com" >luiszuno.com</a></div>
					<div class="right">
						<ul id="social-bar">
							<li><a href="http://www.facebook.com"  title="Become a fan" class="poshytip"><img src="img/social/facebook.png"  alt="Facebook" /></a></li>
							<li><a href="http://www.twitter.com" title="Follow my tweets" class="poshytip"><img src="img/social/twitter.png"  alt="twitter" /></a></li>
							<li><a href="http://www.google.com"  title="Add to the circle" class="poshytip"><img src="img/social/plus.png" alt="Google plus" /></a></li>
						</ul>
					</div>
				</div>	
				<!-- ENDS bottom -->		

			</div>
		</footer>
		
			
	</body>
	
</html>